<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="table">
    <!-- <el-table class="mytable" :data="tableData" :cell-style="cellStyle"> -->
    <el-table
      class="mytable"
      :data="tableData"
      style="color: #fff"
      :header-cell-style="{
        fontSize: '14px',
        color: '#fff',
      }"
    >
      <el-table-column prop="date" label="时间"> </el-table-column>
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column prop="idea" label="皮带机编号"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag  effect="dark" :type="getStatusType(scope.row.state)" :closable="false">
            {{ getStatusText(scope.row.state) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="person" label="处理责任人"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "easyroadShows",
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    typeScope(val) {
      // let typescope=''
      switch (val) {
        case "未处理":
          return "danger"; // 红色示例，你可以调整为合适的红色
        case "已确认":
          return "success";
        case "已处理":
          return "warning"; // 蓝色示例，你可以调整为合适的蓝色
        default:
          return "";
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  methods: {
    handle(index, rows) {
      this.$emit("handle", index, rows);
    },
    cellStyle({ row, column }) {
      if (column.property === "state") {
        switch (row.state) {
          case "未处理":
            return { "background-color": "pink" }; // 红色示例，你可以调整为合适的红色
          case "已确认":
            return { "background-color": "yellow" };
          case "已处理":
            return { "background-color": "lightblue" }; // 蓝色示例，你可以调整为合适的蓝色
          default:
            return {};
        }
      }
      return {};
    },
    getStatusType(status) {
      switch (status) {
        case "1":
          return "danger"; // 对应红色标签类型
        case "2":
          return "warning"; // 对应黄色标签类型
        case "3":
          return "success"; // 对应蓝色标签类型
        default:
          return "";
      }
    },

    getStatusText(status) {
      switch (status) {
        case "1":
          return "未处理";
        case "2":
          return "已处理";
        case "3":
          return "已确认";
        default:
          return "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mytable {
  background-color: transparent;
}
.table /deep/ .el-table th {
  background-color: transparent !important;
}

.table /deep/ .el-table tr {
  background-color: transparent !important;
}
.table /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.table /deep/ .el-table tbody tr:hover>td {
    background-color: transparent !important;
}
.table /deep/ .el-table__fixed-right tbody tr:hover>td {
    background-color: transparent !important;
}

</style>
